<template>
  <div>
    <h1>我的Vue国际化项目-{{ i18n.locale }}</h1>
    <label>请选择语言: </label>
    <label v-for="local in languages" style="margin: 1rem">
      <input
          type="radio"
          :value="local"
          :checked="currentLocale === local"
          @change="handleLanguageChange"
      />
      {{ local }}
    </label>

    <!--    <I18nProvider i18n={i18n}>{props.children}-->
    <!--      <Trans>Abort</Trans>-->
    <!--    </I18nProvider>-->

    <div>{{ i18n._('欢迎') }}</div>
    <div>{{ i18n.t('欢迎2') }}</div>
    <div>{{ $i18n._('欢迎') }}</div>
    <div>{{ $i18n._('欢迎3') }}</div>
    <div>{{ $t('欢迎') }}</div>
    <div>{{ $t('欢迎4') }}</div>
    <div>{{ t('欢迎') }}</div>
    <div>{{ t('欢迎5') }}</div>

    <button @click="showMessage">
      测试js弹出国际化
    </button>
  </div>
</template>


<script setup>
import {ref} from "vue";
import {i18n} from '@lingui/core'
import {switchLocale} from "@/i18n.js";

// 创建响应式语言状态
const currentLocale = ref(i18n.locale)
const languages = ['zh', 'en', 'fr', 'ja']

const handleLanguageChange = async (event) => {
  await switchLocale(event.target.value)
  currentLocale.value = event.target.value;  // 必须加载语言后赋值, 触发页面更新??
}

const showMessage = () => {
  alert(i18n._('弹出测试'))
}
</script>